<template>
  <div style="background-color: white">
    <IntroPic :picture="pic" title="购 物 车"></IntroPic>


    <div style="margin-left: 10%;margin-right: 10%;margin-top: 30px;">
      <el-table
          ref="tableRef"
          :data="cartList"
          style="margin-left: auto;margin-right: auto;width: max-content;"
          @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="产品" width="320">
          <template #default="scope">
            <div style="height: 350px;width: 200px;margin-left: 1%;">
              <img style="width: 100%;height: 100%;object-fit:cover;margin-bottom: auto;margin-top: auto;" :src="scope.row.bookPicture">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="书名" width="350" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-left: 3%;width: 400px;height: max-content;font-size: 18px;
              margin-top: auto;margin-bottom: auto;color: #7a7777;">
                {{ scope.row.bookName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="200" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
                ￥ {{ scope.row.price }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="230" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-top: auto;margin-bottom: auto;color: #7a7777;">
                <el-input-number @change="upCart(scope.$index)" v-model="scope.row.quantity" :min="1" :max="100"/>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="180" >
          <template #default="scope">
            <div style="height: 300px;display: flex;">
              <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
                ￥ {{ scope.row.total }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-left: 10%;margin-right: 10%;margin-top: 30px;">
      <el-row style="font-size: 16px;font-weight: bold;color: #797979;">
        <el-col :span="14">
          <div>
            <el-button @click="delButton" style="height: 40px;width: 100px;margin-left: 15%" type="danger" round>
               删除
            </el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div style="margin-top: 10px">
            总计
          </div>
        </el-col>
        <el-col :span="4">
          <div style="margin-top: 10px">
            {{ numTotal }} 件
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <el-button style="height: 40px" type="success" round>
              支付￥ {{ priceTotal }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup>
import IntroPic from "../Slither/IntroPic.vue";
import {computed, ref} from "vue";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";

const tableRef = ref(null)

let pic = ref('')
const getPic = ()=>{
  axios.get('/pic/shopCart').then(res => {
    //console.log(res.data.data);
    pic.value = res.data.data;
  }).catch(error => {
    ElMessage.error(error)
  })
}
getPic();

let cartList = ref([])
const getCartList = ()=>{
  axios.get('/cart/get').then(res => {
    //console.log(res.data.data);
    cartList.value = res.data.data;
    for (let temp of cartList.value) {
      temp.total = computed(() => {
        return (temp.price * temp.quantity).toFixed(2);
      })
    }
  }).catch(error => {
    ElMessage.error(error)
  })
}
getCartList();

const upCart = (index)=>{
  console.log(cartList.value[index]);
  axios.post("/cart/update", cartList.value[index].cartId).then((res)=>{
    //console.log(res.data.data);
  }).catch(error => {
    ElMessage.error(error)
  })
}

const  delButton = ()=>{
  let delList = [];
  for (let temp of tableRef.value.getSelectionRows()) {
    //console.log(temp);
    delList.push(temp.cartId);
  }
  axios.post("/cart/del", delList).then(()=>{
    //getCartList();
    for (let temp of tableRef.value.getSelectionRows()) {
      for (let k = 0; k < cartList.value.length; k++) {
        if (cartList.value[k].cartId === temp.cartId) {
          cartList.value.splice(k, 1);
        }
      }
    }
  }).catch(error => {
    ElMessage.error(error)
  })
}

const numTotal = computed(() => {
  let num = 0;
  if (tableRef.value !== null) {
    for (let temp of tableRef.value.getSelectionRows()) {
      num += Number(temp.quantity);
    }
  }
  return num;
})

let priceTotal = computed(()=>{
  let num = 0;
  if (tableRef.value !== null) {
    for (let temp of tableRef.value.getSelectionRows()) {
      num += Number(temp.total);
    }
  }
  return num.toFixed(2);
})

const selectionChange = (val)=>{
  //console.log(tableRef.value.getSelectionRows());
}

</script>

<style scoped>
.el-table{
  font-size: 18px;
}
</style>
